<template>
  <view class="storelist_content">
    <view
      class="icon_back"
      :style="{
        backgroundImage: `url(${oss2('others/2023Q4Code/icon_back.png')})`,
      }"
      @click="goBack"
    ></view>

    <view
      class="store_bg"
      :style="{
        backgroundImage: `url(${oss2('others/2023Q4Code/store_bg.png')})`,
      }"
    >
      <view class="store_list" v-if="storeList && storeList.length > 0">
        <view
          class="store_item"
          v-for="item in storeList"
          :key="item.id"
          :style="{
            backgroundImage: `url(${oss2(
              'others/2023Q4Code/store_item_bg.png'
            )})`,
          }"
        >
          <view class="title">{{ item.name }}</view>
          <view class="text">
            {{ item.address }}
          </view>
          <view
            class="icon_map"
            :style="{
              backgroundImage: `url(${oss2('others/2023Q4Code/icon_map.png')})`,
            }"
            >{{ parseInt(item.distance) }}米
          </view>
        </view>
      </view>
      <view v-else>{{ showText }}</view>
      <view
        class="down_btn"
        :style="{
          backgroundImage: `url(${oss2('others/2023Q4Code/down.png')})`,
        }"
      >
      </view>
    </view>
  </view>
</template>

<script setup>
import {
  onLoad,
  onShow,
  onUnload,
  onHide,
  onShareAppMessage,
} from "@dcloudio/uni-app";
import { ref } from "vue";
import { oss2, message } from "@/utils/utils";
import { getDistance } from "@/services/address";

let enterTime = "";
let outTime = "";
let stayTime = "";

const locationInfo = ref({ latitude: "", longitude: "" });
const storeList = ref([]);
const showText = ref("");

onLoad(async (options) => {});
onShow(() => {
  // 用户进入时间
  enterTime = new Date();
  getApp().accessLogAdd();

  uni.getLocation({
    type: "gcj02",
    success(res) {
      locationInfo.value.latitude = res.latitude;
      locationInfo.value.longitude = res.longitude;
      setTimeout(() => {
        getStorelist();
      }, 500);
    },
    fail(err) {
      showText.value = "您尚未开启位置授权";
      uni.getSetting({
        success: (res) => {
          if (
            typeof res.authSetting["scope.userLocation"] != "undefined" &&
            !res.authSetting["scope.userLocation"]
          ) {
            wx.showModal({
              title: "提示",
              content: "当前位置信息未开启，开启后可查看附近门店信息",
              success: (res) => {
                if (res.confirm) {
                  //打开设置 让用户点击允许 这样可以重新获取
                  wx.openSetting({
                    success: (res) => {
                      if (res.authSetting["scope.userLocation"]) {
                        // 授权成功，重新定位即可
                        wx.getLocation({
                          type: "gcj02",
                          altitude: true,
                          isHighAccuracy: true,
                          success: (res) => {
                            locationInfo.value.latitude = res.latitude;
                            locationInfo.value.longitude = res.longitude;
                            getStorelist();
                          },
                          fail: (err) => {
                            console.log(err);
                          },
                        });
                      } else {
                        // 没有允许定位权限
                        wx.showToast({
                          title: "没有允许定位权限",
                          icon: "none",
                        });
                      }
                    },
                  });
                }
              },
            });
          }
        },
      });
      // uni.redirectTo({
      //   url: "/pages/2023oreocore/index",
      // });
    },
  });
});
onHide(() => {
  // 用户退出时间
  outTime = new Date();
  //停留时间(毫秒)
  stayTime = (outTime?.getTime() - enterTime?.getTime()) / 1000;
  getApp().emdlz2(
    "track",
    "event",
    "q4_onecodecampaign_demostore",
    "view",
    "demo_store",
    stayTime
  );
});
onUnload(() => {
  // 用户退出时间
  outTime = new Date();
  //停留时间(毫秒)
  stayTime = (outTime?.getTime() - enterTime?.getTime()) / 1000;
  getApp().emdlz2(
    "track",
    "event",
    "q4_onecodecampaign_demostore",
    "view",
    "demo_store",
    stayTime
  );
});

const linkTo = (url) => uni.navigateTo({ url });

const getStorelist = async () => {
  let params = {
    latitude: locationInfo.value.latitude,
    longitude: locationInfo.value.longitude,
  };
  const { data } = await getDistance(params);
  let list = [];
  data.forEach((item) => {
    if (item.distance <= 5000) {
      list.push(item);
    }
    storeList.value = list;
    if (list.length <= 0) {
      showText.value = "附近暂无门店";
    }
  });
};
const goBack = () => {
  getApp().emdlz2(
    "track",
    "event",
    "q4_onecodecampaign_demostore",
    "click",
    "close_tips1",
    ""
  );

  uni.navigateBack({ delta: 1 });
};
</script>

      <style>
page {
  background-color: #02071e !important;
}
</style>
      <style lang="less" scoped>
.storelist_content {
  position: relative;
  width: 100%;
  min-height: 724px;
  height: 100vh;
  background-color: #08204e;

  .icon_back {
    position: absolute;
    top: 38px;
    left: 0;
    width: 67px;
    height: 30px;
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 67px 100%;
  }

  .store_bg {
    position: absolute;
    top: 8vh;
    left: 33px;
    width: 311px;
    height: 544px;
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 311px 100%;
    box-sizing: border-box;
    padding: 113px 12px 0;
    .store_list {
      width: 292px;
      height: 381px;
      overflow-x: hidden;
      overflow-y: auto;
    }
    .store_item {
      position: relative;
      width: 287px;
      height: 118px;
      background-repeat: no-repeat;
      background-position: top left;
      background-size: 287px 100%;
      margin-bottom: 9px;
      font-family: Source Han Sans CN;
      .title {
        position: absolute;
        top: 33px;
        left: 16px;
        width: 174px;
        height: 17px;
        line-height: 17px;
        font-size: 17px;
        font-weight: bold;
        color: #0041c0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .text {
        width: 246px;
        height: 45px;
        font-size: 13px;
        line-height: 15px;
        font-weight: 500;
        color: #1255e1;
        position: absolute;
        top: 62px;
        left: 17px;
        display: -webkit-box; /* 将容器以弹性盒子形式布局 */
        -webkit-line-clamp: 3; /* 限制文本显示为两行 */
        -webkit-box-orient: vertical; /* 将弹性盒子的主轴方向设置为垂直方向 */
        overflow: hidden; /* 隐藏容器中超出部分的内容 */
        text-overflow: ellipsis; /* 超出容器范围的文本显示省略号 */
      }
      .icon_map {
        width: 68px;
        height: 32px;
        background-repeat: no-repeat;
        background-position: top left;
        background-size: 68px 100%;
        box-sizing: border-box;
        padding: 15px 0 0 25px;
        position: absolute;
        top: 19px;
        right: 13px;
        line-height: 12px;
        font-size: 13px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #ffffff;
      }
    }
    .down_btn {
      width: 27px;
      height: 39px;
      background-repeat: no-repeat;
      background-position: top left;
      background-size: 27px 100%;
      position: absolute;
      left: 142px;
      bottom: 5px;
    }
  }
}
</style>
